<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>用户收货地址</title>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="${css}/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link href="${css}/style2.css" type="text/css" rel="stylesheet" media="all">
    <script src="${js}/jquery.js"></script>
    <script type="text/javascript" src="${js}/bootstrap-3.1.1.min.js"></script>
    <script src="${js}/simpleCart.min.js"> </script>
    <script src="${root}/resource/layer/layer.js"></script>
</head>
<body>
<%--消息--%>
<div id="div_3" style="position: absolute; display: none;z-index: 8;">
    <h2 id="message"></h2>
</div>
<%--消息--%>
<script src="${js}/mc.js"></script>
<%--Login--%>
<!--header-->
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <h1 class="navbar-brand"><a  href="#">My-BookStore</a></h1>
            </div>
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="${root}/user/front/indexView" class="active">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">类型<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column">
                            <li><a class="list" href="${root}/book/front/list">全部</a></li>
                            <c:forEach items="${categorys}" var="category">
                                <li><a class="list" href="${root}/book/front/list?cid=${category.cid}" name="${category.cid}">${category.cname}</a></li>
                            </c:forEach>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/user/front/userinfo" class="list1" >个人中心</a>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/user/front/cart" class="list1">购物车</a>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/user/front/order" class="list1">订单</a>
                    </li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right login" id="login-div">
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
                <c:if test="${not empty userLogin}">
                    <div id="loginBox">
                        <form id="loginForm" style="padding: 10px 10px">
                            <h4>用户名:${userLogin.username}</h4>
                            <button class="btn btn-info"><a href="#">个人中心</a></button><br/>
                            <button id="btn5" class="btn btn-danger">退出登录</button><br/>
                        </form>
                    </div>
                </c:if>
            </div>
            <div class="header-right cart" id="cart-div">
                <a href="${root}/user/front/cart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
            </div>
        </div>
        <script>
            $(function () {
                $("#btn5").click(function () {
                    $.ajax({
                        url:"${root}/user/front/return",
                        type:"get",
                        success:function (response) {
                            if (response.result==200){
                                showInfo();
                                $("#message").text("退出成功！");
                                setTimeout(function () {
                                    hideInfo();
                                    $("#message").text("");
                                    location.href("${root}/user/front/indexView");
                                },3000);
                            }
                        }
                    })
                });
            })
        </script>
    </div>
</div>
<!--//header-->
<style>
    .in-class{
        border: 1px solid #CCC;
        cursor: pointer;
        height: 20px;
        margin: 3px 0;
        text-indent:10px;
        position: relative;
        transition: width 400ms ease, background 400ms ease, border-radius 400ms ease;
        width: 80px;
        font-size: 16px;
    }
    .in-class:focus{
        background-color: #fff;
        border: 2px solid #c3c0ab;
        border-radius:10px;
        cursor: text;
        outline: 0;
        width: 180px;
    }
</style>

<div class="jumbotron" style="background-color: whitesmoke" >
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-2 column">
                <div class="list-group">
                    <a href="${root}/user/front/userinfo" class="list-group-item">用户信息页</a>
                    <a href="${root}/user/front/address" class="list-group-item">收货地址设置</a>
                    <a href="${root}/orders/user/orderList" class="list-group-item">用户订单信息</a>
                </div>
            </div>

            <script>
                $(function(){
                    $("a").click(function(){
                        $("a").removeClass("active");
                        $(this).addClass("active");
                    });
                })
            </script>

            <div class="col-md-10 column">
                <h3 class="text-center text-warning">
                    用户收货地址
                </h3>
                <table class="table table-bordered ">
                    <thead>
                    <tr class="text-center">
                        <th>收件人昵称:</th>
                        <th>电话:</th>
                        <th>省份:</th>
                        <th>城市:</th>
                        <th>区域:</th>
                        <th>详细地址：</th>
                        <th>默认地址：</th>
                        <th colspan="2">操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">

                    </tbody>
                </table>
                <script>
                    function update(){
                        $(".btn-u").click(function () {
                            let id = $(this).attr("name");
                            let stated = $(this).parent().prev().children().val();
                            let address = $(this).parent().prev().prev().children().val();
                            let area = $(this).parent().prev().prev().prev().children().val();
                            let city = $(this).parent().prev().prev().prev().prev().children().val();
                            let province = $(this).parent().prev().prev().prev().prev().prev().children().val();
                            let phone = $(this).parent().prev().prev().prev().prev().prev().prev().children().val();
                            let receiver = $(this).parent().prev().prev().prev().prev().prev().prev().prev().children().val();
                            $.ajax({
                                url:"${root}/address/update",
                                data:{"id":id,"uid":"${userLogin.uid}","receiver":receiver,
                                    "phone":phone,"province":province,"city":city,"area":area,
                                    "address":address,"stated":stated},
                                type:"post",
                                dataType:"json",
                                success:function (response) {
                                    if (response.code==200){
                                        showInfo();
                                        $("#message").text(response.message);
                                        setTimeout(function () {
                                            hideInfo();
                                            $("#message").text("");
                                        },2000);
                                        window.location.reload();
                                    }else if(response.code==300){
                                        showInfo();
                                        $("#message").text(response.message);
                                        setTimeout(function () {
                                            hideInfo();
                                            $("#message").text("");
                                        },1000);
                                    }else{
                                        alert(response.message);
                                    }
                                }
                            })
                        });
                    };

                    function del(){
                        $(".btn-d").click(function () {
                            let id = $(this).attr("name");
                            let the = $(this);
                            $.ajax({
                                url:"${root}/address/delete",
                                data:{"id":id},
                                type:"post",
                                dataType:"json",
                                success:function (response) {
                                    if (response.code==200){
                                        console.log(the);
                                        the.parent().parent().remove();
                                        showInfo();
                                        $("#message").text(response.message);
                                        setTimeout(function () {
                                            hideInfo();
                                            $("#message").text("");
                                        },1000);
                                    }else{
                                        showInfo();
                                        $("#message").text(response.message);
                                        setTimeout(function () {
                                            hideInfo();
                                            $("#message").text("");
                                        },1000);
                                    }
                                }
                            })
                        });
                    };

                    $(function () {
                        $.ajax({
                            url:"${root}/address/findSome",
                            type:"post",
                            data:{"uid":"${userLogin.uid}"},
                            dataType: "json",
                            success:function (response) {
                                if (response.code==200){

                                    $.each(response.data,function () {

                                        let input1 = $("<input class='in-class' size='5'>");
                                        let input2 = $("<input class='in-class' size='5'>");
                                        let input3 = $("<input class='in-class' size='5'>");
                                        let input4 = $("<input class='in-class' size='5'>");
                                        let input5 = $("<input class='in-class' size='5'>");
                                        let input6 = $("<input class='in-class' size='5'>");
                                        input1.val(this.receiver);
                                        input2.val(this.phone);
                                        input3.val(this.province);
                                        input4.val(this.city);
                                        input5.val(this.area);
                                        input6.val(this.address);

                                        let checkbox;
                                        if(this.stated==1){
                                            checkbox = $("<input  class='in-class' checked onclick='this.value=1' type='radio'>");
                                        }else{
                                            checkbox = $("<input  class='in-class' onclick='this.value=1' type='radio'>");
                                        }
                                        checkbox.val(this.stated);

                                        let Update = $("<button type='button' class='btn-warning btn-u'></button>");
                                        Update.text("修改");
                                        Update.attr("name",this.id);
                                        let Delete = $("<button type='button' class='btn-danger btn-d'></button>");
                                        Delete.text("删除");
                                        Delete.attr("name",this.id);

                                        let td1 = $("<td></td>");
                                        let td2 = $("<td></td>");
                                        let td3 = $("<td></td>");
                                        let td4 = $("<td></td>");
                                        let td5 = $("<td></td>");
                                        let td6 = $("<td></td>");
                                        let td7 = $("<td></td>");
                                        let td8 = $("<td></td>");
                                        let td9 = $("<td></td>");

                                        td1.append(input1);
                                        td2.append(input2);
                                        td3.append(input3);
                                        td4.append(input4);
                                        td5.append(input5);
                                        td6.append(input6);
                                        td7.append(checkbox);
                                        td8.append(Update);
                                        td9.append(Delete);

                                        let tr = $("<tr></tr>");
                                        tr.append(td1);
                                        tr.append(td2);
                                        tr.append(td3);
                                        tr.append(td4);
                                        tr.append(td5);
                                        tr.append(td6);
                                        tr.append(td7);
                                        tr.append(td8);
                                        tr.append(td9);

                                        $("#tbody").append(tr);

                                    });
                                    update();
                                    del();
                                }else if (response.message==300){
                                    showInfo();
                                    $("#message").text(response.message);
                                    setTimeout(function () {
                                        hideInfo();
                                        $("#message").text("");
                                    },3000);
                                }else{
                                    alert(response.message);
                                }
                            }
                        });




                    })
                </script>
                <h3 class="text-center text-warning">
                    用户新增地址
                </h3>
                <form class="form-horizontal" role="form"  id="addressForm">
                    <input type="hidden" name="uid" value="${userLogin.uid}"/>
                    <input type="hidden" name="stated" value="0"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">收件人</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="receiver" name="receiver"/>
                        </div>
                        <div class="col-sm-2">
                            <span id="receiverError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="phone"  name="phone" />
                        </div>
                        <div class="col-sm-2">
                            <span id="phoneError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">省份</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="province"  name="province" />
                        </div>
                        <div class="col-sm-2">
                            <span id="provinceError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">城市</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="city"  name="city" />
                        </div>
                        <div class="col-sm-2">
                            <span id="cityError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">区(县)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="area"  name="area" />
                        </div>
                        <div class="col-sm-2">
                            <span id="areaError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">详细地址</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="address"  name="address" />
                        </div>
                        <div class="col-sm-2">
                            <span id="addressError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="addBtn" type="button" class="btn btn-default">添加</button>
                        </div>
                    </div>
                </form>
                <script>
                    $("#addBtn").click(function () {
                        $.ajax({
                            url:"${root}/address/save",
                            type: "post",
                            data:$("#addressForm").serialize(),
                            dataType:"json",
                            success:function (response) {
                                if (response.code==200){
                                    $("#receiver").val("");
                                    $("#phone").val("");
                                    $("#province").val("");
                                    $("#city").val("");
                                    $("#area").val("");
                                    $("#address").val("");

                                    $("#receiverError").text("");
                                    $("#phoneError").text("");
                                    $("#provinceError").text("");
                                    $("#cityError").text("");
                                    $("#areaError").text("");
                                    $("#addressError").text("");

                                    let input1 = $("<input class='in-class' size='5'>");
                                    let input2 = $("<input class='in-class' size='5'>");
                                    let input3 = $("<input class='in-class' size='5'>");
                                    let input4 = $("<input class='in-class' size='5'>");
                                    let input5 = $("<input class='in-class' size='5'>");
                                    let input6 = $("<input class='in-class' size='5'>");
                                    input1.val(response.data.receiver);
                                    input2.val(response.data.phone);
                                    input3.val(response.data.province);
                                    input4.val(response.data.city);
                                    input5.val(response.data.area);
                                    input6.val(response.data.address);

                                    let checkbox = $("<input class='in-class' onclick='this.value=1' type='radio' >");
                                    checkbox.val(response.data.stated);

                                    let Update = $("<button type='button' class='btn-warning btn-u'></button>");
                                    Update.text("修改");
                                    Update.attr("name",response.data.id);
                                    let Delete = $("<button type='button' class='btn-danger btn-d'></button>");
                                    Delete.text("删除");
                                    Delete.attr("name",response.data.id);

                                    let td1 = $("<td></td>");
                                    let td2 = $("<td></td>");
                                    let td3 = $("<td></td>");
                                    let td4 = $("<td></td>");
                                    let td5 = $("<td></td>");
                                    let td6 = $("<td></td>");
                                    let td7 = $("<td></td>");
                                    let td8 = $("<td></td>");
                                    let td9 = $("<td></td>");

                                    td1.append(input1);
                                    td2.append(input2);
                                    td3.append(input3);
                                    td4.append(input4);
                                    td5.append(input5);
                                    td6.append(input6);
                                    td7.append(checkbox);
                                    td8.append(Update);
                                    td9.append(Delete);

                                    let tr = $("<tr></tr>");
                                    tr.append(td1);
                                    tr.append(td2);
                                    tr.append(td3);
                                    tr.append(td4);
                                    tr.append(td5);
                                    tr.append(td6);
                                    tr.append(td7);
                                    tr.append(td8);
                                    tr.append(td9);

                                    $("#tbody").append(tr);

                                    showInfo();
                                    $("#message").text(response.message);
                                    setTimeout(function () {
                                        hideInfo();
                                        $("#message").text("");
                                    },3000);
                                }else if(response.code==300){
                                    $("#receiverError").text(response.data.receiverError);
                                    $("#phoneError").text(response.data.phoneError);
                                    $("#provinceError").text(response.data.provinceError);
                                    $("#cityError").text(response.data.cityError);
                                    $("#areaError").text(response.data.areaError);
                                    $("#addressError").text(response.data.addressError);
                                    showInfo();
                                    $("#message").text("上传信息有空值！");
                                    setTimeout(function () {
                                        hideInfo();
                                        $("#message").text("");
                                    },3000);
                                }else {
                                    alert(response.message);
                                    showInfo();
                                    $("#message").text("新增失败！");
                                    setTimeout(function () {
                                        hideInfo();
                                        $("#message").text("");
                                    },3000);
                                }
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
<!--footer-->
<div class="footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-2 footer-grid">
                <h4>公司</h4>
                <ul>
                    <li><a href="#">工作地点</a></li>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">事件</a></li>
                    <li><a href="#">经销商</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>业务</h4>
                <ul>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">担保</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h4>订单 & 退货</h4>
                <ul>
                    <li><a href="#">订单状态</a></li>
                    <li><a href="#">配送方式</a></li>
                    <li><a href="#">退换货说明</a></li>
                    <li><a href="#">电子卡片</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>法律</h4>
                <ul>
                    <li><a href="#">隐私</a></li>
                    <li><a href="#">条款和条件</a></li>
                    <li><a href="#">社会责任</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid icons">
                <h4>与我们联系</h4>
                <ul>
                    <li><a href="#"><img src="${images}/i1.jpg" alt=""/>在Wechat上关注我们</a></li>
                    <li><a href="#"><img src="${images}/i2.jpg" alt=""/>在微博上关注我们</a></li>
                    <li><a href="#"><img src="${images}/i3.jpg" alt=""/>在QQ上关注我们</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="footer-bottom">
    <div class="container">
        <p>Copyright &copy; 2021.Company name MINE.More Software <a href="http://www.1127009780@qq.com/" target="_blank" title="fcx的Home">fcx的Home</a>.</p>
    </div>
</div>
</body>
</html>
